

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/static/plugs/awesome/css/font-awesome.min.css?ver=171025">
    <style>
        html,body{ width: 100%; height: 100%; margin: 0; padding: 0;}
        body{
            display: flex;
            flex-direction: column;
            align-items:center;/*垂直居中*/
            justify-content: center;/*水平居中*/
        }
        body .fa{
            font-size: 150px;
            color: #ddd;
        }
        body button{
            margin-top: 20px;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <i class="fa fa-file-image-o"></i>
    <button>点击选择图片</button>


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.0.3/layer.min.js"></script>

    <!-- webuploader -->
    <script src="http://oss.ponley.com/oss-h5-upload-js-direct/lib/crypto1/crypto/crypto.js"></script>
    <script src="http://oss.ponley.com/oss-h5-upload-js-direct/lib/crypto1/hmac/hmac.js"></script>
    <script src="http://oss.ponley.com/oss-h5-upload-js-direct/lib/crypto1/sha1/sha1.js"></script>
    <script src="http://oss.ponley.com/oss-h5-upload-js-direct/lib/base64.js"></script>
    <script src="/static/js/function.js"></script>
    <script src="/static/js/upload2oss.js"></script>
    <script src="/static/js/frame.js"></script>

<script>

    /*
     获取请求参数
     */
    var urlParam = function (name) {
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if (results) {
            return results[1];
        } else {
            return "";
        }
    };

    $(function(){
        var field = urlParam("field");

        $("button").on("click",function(){

            //创建页面元素
            var fileObj = document.createElement("input");
            fileObj.setAttribute("type", "file");
            fileObj.setAttribute("accept", ".jpg,.jpeg,.gif,.png,.bmp");
            fileObj.setAttribute("style", "display:none");
            $(fileObj).change(function () {
                var index = layer.load(0, { shade:0.2 });
                var file = fileObj.files[0];
                var name = window.guid();
                $.upload2oss({
                    accessid:    accessid,
                    accesskey:   accesskey,
                    host:        host,
                    file:   file,
                    key: key + "/" + name + ".png",
                    success:function(e,option){
                        var url = option.host +"/"+ option.key;


                        $("[name='"+field+"']",top.document).val(url);

                        $("[name='"+field+"']",top.document).trigger("click");


                        var index = top.layer.getFrameIndex(window.name);
                        top.layer.close(index);

                    },
                    complete:function(){
                        layer.close(index);
                    }
                });
            });
            fileObj.click();
        });
    });


</script>

</body>
</html>
